<template>
  <div class="content" style="height: 100%;">
    <div>
      <Tabs type="card">
        <TabPane label="食谱参数设置">
          <Table border :loading="loading" :columns="columns" :data="data">
            <template slot-scope="{ row, index }" slot="breakfast">
              <div v-if="!isEdit">{{ row.breakfast }}</div>
              <InputNumber style="width:60%" :min="0" :max="100 - row.dinner - row.lunch"
                v-model="data[index].breakfast" v-else></InputNumber>
            </template>
            <template slot-scope="{ row, index }" slot="lunch">
              <div v-if="!isEdit">{{ row.lunch }}</div>
              <InputNumber style="width:60%" v-else :min="0" :max="100 - row.breakfast - row.dinner"
                v-model="data[index].lunch"></InputNumber>
            </template>
            <template slot-scope="{ row, index }" slot="dinner">
              <div v-if="!isEdit">{{ row.dinner }}</div>
              <InputNumber style="width:60%" v-else :min="0" :max="100 - row.breakfast - row.lunch"
                v-model="data[index].dinner"></InputNumber>
            </template>
          </Table>
          <div style="margin:30px 100px 0 0">
            <Form ref="formValidate" :model="form">
              <FormItem label="三餐剩菜率(%)" :label-width="120">
                <InputNumber :max="100" :min="0" v-model="form.mealDishOrtRatio"
                  :disabled="!isEdit"></InputNumber>
              </FormItem>
            </Form>
          </div>
          <div class="formBox">
            <cusButton class="mr_20 mb_20 mt_15" type="primary" @onClick="isEdit = true"
              v-if="!isEdit">修改</cusButton>
            <cusButton class="mr_20 mb_20 mt_15" @onClick="cancelBtn(1)" v-if="isEdit">取消
            </cusButton>
            <cusButton class="mr_20 mb_20 mt_15" type="primary" @onClick="saveAssessmentSetingBtn"
              v-if="isEdit">保存</cusButton>
          </div>
        </TabPane>
        <TabPane label="食谱生成设置">
          <div>
            <Spin size="large" fix v-if="loading"></Spin>
            <div style="margin:30px 100px 0 0">
              <Form ref="formValidate" :model="form">
                <!-- <FormItem label="是否允许手工生成本周食谱" :label-width="220">
                              <Select v-model="form.isHandworkCreateMeal" style="width:100px" :disabled="!isEdit2">
                                  <Option :value="0" >否</Option>
                                  <Option :value="1" >是</Option>
                              </Select>
                          </FormItem> -->
                <FormItem label="食谱生成采购需求按" :label-width="200">
                  <Select v-model="form.mealGeneratePurchaseType" style="width:100px"
                    :disabled="!isEdit2">
                    <Option :value="0">斤</Option>
                    <Option :value="1">公斤</Option>
                  </Select>
                  采购
                </FormItem>
                <FormItem label="食谱生成方式" :label-width="200">
                  <Select v-model="form.createRecipeWay" style="width:100px" :disabled="!isEdit2">
                    <Option :value="0">可用</Option>
                    <Option :value="1">有价格</Option>
                  </Select>
                  菜肴生成
                </FormItem>
                <FormItem label="无配料菜肴生成采购计划" :label-width="200">
                  <Select v-model="form.isMealPlanExistNoBomFoodDishGeneratePurchasingPlan"
                    style="width: 100px" :disabled="!isEdit2">
                    <Option :value="0">不允许</Option>
                    <Option :value="1">允许</Option>
                  </Select>
                  采购
                </FormItem>
                <FormItem label="是否开启食谱预生成" :label-width="220">
                  <Select v-model="form.preGeneration" style="width:100px" :disabled="!isEdit2">
                    <Option :value="0">否</Option>
                    <Option :value="1">是</Option>
                  </Select>
                </FormItem>
                <div style="width:30%"></div>
              </Form>
            </div>
            <div class="formBox">
              <cusButton class="mr_20 mb_20 mt_15" type="primary" @onClick="isEdit2 = true"
                v-if="!isEdit2">修改</cusButton>
              <cusButton class="mr_20 mb_20 mt_15" @onClick="cancelBtn(2)" v-if="isEdit2">取消
              </cusButton>
              <cusButton class="mr_20 mb_20 mt_15" type="primary"
                @onClick="updateMealParameterSettingApi(1)" v-if="isEdit2">保存</cusButton>
            </div>
          </div>
        </TabPane>
        <TabPane label="伙食费浮动比例">
          <div>
            <div style="margin:30px 100px 0 0">
              <Form ref="formValidate" :model="form">
                <FormItem label="伙食费允许浮动比例（%）" :label-width="220">
                  <InputNumber :max="100" :min="0" v-model="form.boardFloatRatio"
                    :disabled="!isEdit3"></InputNumber>
                </FormItem>
              </Form>
            </div>
            <div class="formBox">
              <cusButton class="mr_20 mb_20 mt_15" type="primary" @onClick="isEdit3 = true"
                v-if="!isEdit3">修改</cusButton>
              <cusButton class="mr_20 mb_20 mt_15" @onClick="cancelBtn(3)" v-if="isEdit3">取消
              </cusButton>
              <cusButton class="mr_20 mb_20 mt_15" type="primary"
                @onClick="updateMealParameterSettingApi(2)" v-if="isEdit3">保存</cusButton>
            </div>
          </div>
        </TabPane>
        <TabPane label="热量(kcal/人/天)">
          <div>
            <Table border :loading="loading2" :columns="columns2" :data="data2"></Table>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import {
	assessmentSeting,
	assessmentSetingAlter,
	getMealParameterSetting,
	updateMealParameterSetting,
	getLabourStrengthListParams
} from '@/api/business/dishesModule'
export default {
	components: {},
	data() {
		return {
			loading: false,
			loading2: false,
			columns: [
				{
					title: '',
					key: 'name',
					align: 'center'
				},
				{
					title: '早餐',
					slot: 'breakfast',
					align: 'center'
				},
				{
					title: '午餐',
					slot: 'lunch',
					align: 'center'
				},
				{
					title: '晚餐',
					slot: 'dinner',
					align: 'center'
				}
			],
			columns2: [
				{
					title: '序号',
					type: 'index',
					width: 70,
					align: 'center'
				},
				{
					title: '劳动强度',
					key: 'strength',
					align: 'center'
				},
				{
					title: '活动类型',
					key: 'activityType',
					align: 'center'
				},
				{
					title: '推荐热量',
					key: 'energy',
					align: 'center'
				}
			],
			data: [],
			copyData: [],
			tabsTwoArr: [],
			data2: [
				{ name: '轻度劳动', energy: '2600-3000' },
				{ name: '中度劳动', energy: '3000-3500' },
				{ name: '重度劳动', energy: '3500-4000' },
				{ name: '极重度劳动', energy: '4000-4500' },
				{ name: '水面舰艇人员', energy: '3300-3600' },
				{ name: '潜艇人员', energy: '3300-3600' },
				{ name: '核潜艇人员', energy: '3500-3700' },
				{ name: '飞行人员', energy: '3100-3600' }
			],
			form: {
				mealDishOrtRatio: 0, // 剩菜比
				isHandworkCreateMeal: null, // 是否允许手工生成本周食谱
				mealGeneratePurchaseType: null, // 食谱生成采购需求模式
				createRecipeWay: null,
				isMealPlanExistNoBomFoodDishGeneratePurchasingPlan: null, //是否允许无配料菜肴生成采购计划
				boardFloatRatio: 0, // 伙食费允许浮动比例
				isHand: '0',
				unit: '公斤',
				jingque: 4,
				float: 5,
				preGeneration:0,//是否允许预生成食谱
			},
			copyForm: {},
			isEdit: false,
			isEdit2: false,
			isEdit3: false
		}
	},
	mounted() {
		this.assessmentSetingApi()
		this.getMealParameterSettingApi()
		this.getLabourStrengthListParamsApi()
	},
	methods: {
		// 获取列表
		assessmentSetingApi() {
			this.data = []
			return new Promise((resolve) => {
				this.form.loading = true
				assessmentSeting({}).then((res) => {
					this.form.loading = false
					if (res.retCode == 2000) {
						if (res.data.usingOilRatio) {
							this.data.push(
								Object.assign({ name: '三餐用油比(%)' }, res.data.usingOilRatio)
							)
						}
						if (res.data.nutrientHeatValue) {
							this.data.push(
								Object.assign(
									{ name: '三餐产热比(%)' },
									res.data.nutrientHeatValue
								)
							)
						}
						if (res.data.boardTimesRatio) {
							this.data.push(
								Object.assign(
									{ name: '三餐伙食费比(%)' },
									res.data.boardTimesRatio
								)
							)
						}
						this.form.mealDishOrtRatio = res.data.mealDishOrtRatio
						this.copyData = this.$cu.deepClone(this.data)
						this.copyForm = this.$cu.deepClone(this.form)
						resolve()
					}
				})
			})
		},
		// 获取食谱生成参数
		getMealParameterSettingApi() {
			return new Promise((resolve) => {
				getMealParameterSetting({}).then((res) => {
					this.loading = false
					if (res.retCode == 2000) {
						if (res.data.length) {
							this.tabsTwoArr = res.data
							this.form.isHandworkCreateMeal = res.data[0].parameterValue
							this.form.mealGeneratePurchaseType = res.data[1].parameterValue
							this.form.isMealPlanExistNoBomFoodDishGeneratePurchasingPlan =
								res.data[5].parameterValue
							this.form.boardFloatRatio = res.data[3].parameterValue
							this.form.createRecipeWay = res.data[4].parameterValue
							this.form.preGeneration = res.data[6].parameterValue
						}
						resolve()
					}
				})
			})
		},
		// 获取劳动强度列表
		getLabourStrengthListParamsApi() {
			this.loading2 = true
			return new Promise((resolve) => {
				getLabourStrengthListParams({}).then((res) => {
					this.loading2 = false
					if (res.retCode == 2000) {
						this.data2 = res.data
						resolve()
					}
				})
			})
		},
		cancelBtn(type) {
			if (type == 1) {
				this.data = this.$cu.deepClone(this.copyData)
				this.isEdit = false
			} else if (type == 2) {
				this.isEdit2 = false
			} else {
				this.isEdit3 = false
			}
			this.form = this.$cu.deepClone(this.copyForm)
		},
		// 保存
		saveAssessmentSetingBtn() {
			for (let i = 0; i < this.data.length; i++) {
				if (
					this.data[i].breakfast + this.data[i].dinner + this.data[i].lunch !=
					100
				) {
					this.$Message.error(`${this.data[i].name}之和不等于100`)
					return
				}
			}
			this.loading = true
			return new Promise((resolve) => {
				assessmentSetingAlter({
					nutrientHeatValue: this.data[1],
					usingOilRatio: this.data[0],
					boardTimesRatio: this.data[2],
					mealDishOrtRatio: this.form.mealDishOrtRatio
				}).then((res) => {
					this.loading = false
					if (res.retCode === 2000) {
						this.isEdit = false
						this.$Message.success('修改成功')
						this.assessmentSetingApi()
						resolve()
					}
				})
			})
		},
		// 保存食谱生成参数
		updateMealParameterSettingApi(type) {
			this.loading = true
			return new Promise((resolve) => {
				let arr = null
				if (type == 1) {
					this.tabsTwoArr[0].parameterValue = this.form.isHandworkCreateMeal
					this.tabsTwoArr[1].parameterValue = this.form.mealGeneratePurchaseType
					this.tabsTwoArr[4].parameterValue = this.form.createRecipeWay
					this.tabsTwoArr[5].parameterValue = this.form.isMealPlanExistNoBomFoodDishGeneratePurchasingPlan
					// this.tabsTwoArr[6].parameterValue = this.form.preGeneration
					arr = [
						this.tabsTwoArr[0],
						this.tabsTwoArr[1],
						this.tabsTwoArr[4],
						this.tabsTwoArr[5],
						// this.tabsTwoArr[6]
					]
				} else {
					this.tabsTwoArr[3].parameterValue = this.form.boardFloatRatio
					arr = [this.tabsTwoArr[3]]
				}
				updateMealParameterSetting(arr).then((res) => {
					this.loading = false
					if (res.retCode === 2000) {
						if (type == 1) {
							this.$Message.success('食谱生成参修改成功')
							this.isEdit2 = false
						} else {
							this.$Message.success('伙食费允许浮动比例修改成功')
							this.isEdit3 = false
						}

						this.getMealParameterSettingApi()
						resolve()
					}
				})
			})
		}
	}
}
</script>

<style lang="less" scoped>
.content {
	background: #ffff;
	padding: 20px;
	border-radius: 6px;
	box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
}
.cardItem {
	// min-height: 500px;
}
.formBox {
	width: 100%;
	background: #fff;
	border-radius: 4px;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	&-item {
		width: 200px;
		margin-right: 48px;
	}
	&-title {
		color: rgba(0, 0, 0, 0.85) !important;
		font-size: 16px;
		margin-bottom: 10px;
		width: 100%;
	}
}
</style>
